import React, { Component } from 'react'
import { NavBar } from "antd-mobile"
import "./category.scss"
import SearchInput from "../searchInput/SearchInput"
import myAxios from "../../utils/myaxios"
export default class Category extends Component {
  //状态
  state = {
    category_data_1st: [],
    category_content: [],
    category_index: 0
  }
  //事件
  //点击左侧的导航
  handleCategoryClick = (e) => {
    let select_index = e.target.getAttribute("data-index")
    this.setState({
      category_index: parseInt(select_index),
      category_content: this.state.category_data_1st[parseInt(select_index)].children
    })
  }
  // 获取分类菜单的数据
  getCategories = (params) => {
    myAxios
      .get("https://www.linweiqin.cn/api/public/v1/categories")
      .then((res) => {
        this.setCategories(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  // 设置分类菜单的数据
  // is_storaged 代表是否之前已经缓存过
  setCategories = (res, is_storaged) => {
    //缓存请求的数据
    let categories_cache = {};
    if (is_storaged) {
      // 直接获取本地缓存中的数据即可
      categories_cache = JSON.parse(localStorage.getItem("categories_cache"));
    } else {
      categories_cache = { date: Date.now(), categories: res };
    }
    // 缓存到本地中
    localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
    this.setState({
      category_data_1st: res.data.message,
      category_content: res.data.message[0].children,
    });
  };
  //挂载
  componentDidMount() {
    let categories_cache = localStorage.getItem("categories_cache");
    // 如果本地缓存不会空
    if (categories_cache) {
      // 判断本地缓存是否过期
      // 当前时间
      let current_time = Date.now();
      // 存储的时间
      let storage_time = JSON.parse(categories_cache).date;
      if (current_time - storage_time > 60 * 60 * 1000) {
        // 一小时过期
        this.getCategories();
      } else {
        // 缓存没有过期
        // 第二个参数 代表是否已经缓存
        this.setCategories(JSON.parse(categories_cache).categories, true);
      }
    } else {
      this.getCategories();
    }
  }
  render() {
    return (
      <div className="ygCategory">
        {/* 头部 */}
        <div className="ygCategoryHeader">
          <NavBar className="categoryHeader">分类</NavBar>
        </div>
        {/* 搜索框 */}
        <div className="ygHomeSearch">
          <SearchInput></SearchInput>
        </div>
        {/* 分类页的主要内容 */}
        <div className="ygCategoryContent">
          {/* 左侧商品分类导航栏 */}
          <div className="ygCategoryContentLeft" onClick={this.handleCategoryClick}>
            {/* 所有一级菜单 */}
            {
              this.state.category_data_1st.map((v, index) =>
                <div
                  key={v.cat_id}
                  data-index={index}
                  className={this.state.category_index === index ? "category_1st active" : "category_1st"}
                  >
                  {v.cat_name}
                </div>
              )
            }

          </div>
          {/* 右侧品牌列表 */}
          <div className="ygCategoryContentRight">
            {
              this.state.category_content.map((v, i) =>
              // 二级菜单
                <div className="rightItem" key={i}>
                  <div className="rightItemTitle">{v.cat_name}</div>
                  <div className="rightItemBrandList">
                    {
                      v.children&&v.children.map((vv,i)=>
                      //三级菜单
                        <div className="brandListItem" key={i}>
                          <img src={vv.cat_icon} alt=""/>
                          <span>{vv.cat_name}</span>
                        </div>
                      )
                    }
                  </div>
                </div>
              )
            }
          </div>
        </div>
      </div>
    )
  }
}
